<template>
	<view>
		<!-- 主表信息 -->
		<view class="mian-table">

			<view class="main-table-title">
				<view class="mian-table-name">
					表头信息
				</view>
			</view>

			<view class="mian-table-content">
				<formItem :formConfig='filterMainCF' :formVal='formValueMain'></formItem>
			</view>
		</view>
		<!-- 子表信息 -->
		<view class="sub-table">

			<view class="sub-table-title">
				<view class="sub-table-title-name">
					物资信息
				</view>
				<view class="sub-table-title-contrl">
					<text class="dicon diconjia-xianxingfangkuang"></text>
					<!-- <text class="dicon diconlog"></text> -->
					<text class="dicon diconsaomiao"></text>
				</view>
			</view>

			<view class="sub-table-content" v-for='(item,index) in formValueSub ' :key='index'>
				<formItem :formConfig='filterSubCF' :formVal='item' :formIndex='index'></formItem>
			</view>

		</view>

		<view class="operation">
			<view class="operation-button border-right">
				保存
			</view>
			<view class="operation-button border-right">
				返回
			</view>
			<view class="operation-button">
				打印
			</view>
		</view>

	</view>
</template>

<script>
	import formItem from '@/components/form/form_item.vue';

	export default {
		components: {
			formItem
		},
		props: {
			config: {
				type: Object
			},
			formValueMain: {
				type: Object
			},
			formValueSub: {
				type: Array
			}
		},
		computed: {
			filterMainCF() {
				return this.config.mainTB.filter(item => {
					return item.isShow;
				})
			},

			filterSubCF() {
				return this.config.subTB.filter(item => {
					return item.isShow;
				})
			},

			deepSubVal() {
				
				let t = [{
						"MATSPEC": "",
						"INSTATIONNAME": "111"
					},
					{
						"MATSPEC": "",
						"INSTATIONNAME": "222"
					},
					{
						"MATSPEC": "",
						"INSTATIONNAME": "333"
					}
				]
				return t;
				// return this.config.subTB.filter(item => {
				// 	return item.isShow;
				// })
			},

		},
		data() {
			return {

			};
		},
		methods: {


		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 110rpx;
	}

	.mian-table {
		background-color: #FFFFFF;
		color: #555555;

		.main-table-title {
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #F1F1F1;

			.mian-table-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.mian-table-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677FF;
			}
		}


		.mian-table-content {
			padding: 0 30rpx;
		}
	}

	.sub-table {
		color: #555555;

		.sub-table-title {
			background-color: #FFFFFF;
			display: flex;
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #F1F1F1;
			justify-content: space-between;
			align-items: center;

			.sub-table-title-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.sub-table-title-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677FF;
			}

			.dicon {
				font-size: 50rpx;
				margin: 0 10rpx;
			}
		}

		.sub-table-content {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 0 30rpx;
		}

	}

	.operation {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx #AAAAAA;

		.operation-button {
			flex: 1;
			text-align: center;
			position: relative;
		}

		.border-right:after {
			content: '';
			width: 2rpx;
			height: 40rpx;
			position: absolute;
			top: 30rpx;
			right: 0;
			display: inline-block;
			background-color: #ddd;
		}
	}
</style>
